﻿.table-filter {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 5;
}

    .table-filter .table-filter-item {
        min-width: 220px;
        background-color: #fff;
        border: 1px solid rgba(0,0,0,.125);
        position: absolute;
        display: none;
    }

        .table-filter .table-filter-item.show {
            display: block;
        }

    .table-filter .card-header {
        padding: 0.5rem 1rem;
    }

    .table-filter .card-arrow {
        position: absolute;
        display: block;
        width: 1rem;
        height: .5rem;
        margin: 0;
        top: calc((.5rem + 1px) * -1);
        left: calc(50% - 0.5rem);
    }

        .table-filter .card-arrow:before,
        .table-filter .card-arrow:after {
            position: absolute;
            display: block;
            content: "";
            border-color: transparent;
            border-style: solid;
        }

        .table-filter .card-arrow:before {
            border-bottom-color: #ced4da;
            top: 0;
            border-width: 0 .5rem .5rem .5rem;
        }

        .table-filter .card-arrow:after {
            top: 1px;
            border-width: 0 .5rem .5rem .5rem;
            border-bottom-color: #f7f7f7;
        }

    .table-filter .card-body {
        padding: 1rem;
    }

        .table-filter .card-body .is-condition {
            max-width: 10rem;
        }

        .table-filter .card-body > *:not(:first-child) {
            margin-top: 0.5rem;
        }

        .table-filter .card-body .select {
            display: block;
        }

    .table-filter .card-footer {
        padding: 0.5rem;
        display: flex;
        white-space: nowrap;
    }

        .table-filter .card-footer .btn:not(:first-child) {
            margin-left: 0.5rem;
        }

        .table-filter .card-footer .btn {
            padding: 7px 15px;
            font-size: 0.875rem;
            line-height: 12px;
            border: 1px solid #dcdfe6;
            color: #606266;
            transition: border-color .3s linear, color .3s linear;
        }

            .table-filter .card-footer .btn:not(.disabled):not(:disabled):hover {
                border-color: #409eff;
                color: #409eff;
            }

.filter-row {
    display: flex;
}

    .filter-row .btn-ban {
        display: none;
        padding-left: 0;
    }

    .filter-row input {
        min-width: 50px;
    }

    .filter-row.active .btn-ban {
        display: block;
    }

.btn-filter::after {
    content: none;
}
